<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../../../common/taglib.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>我的购物车</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<link href="${ctx }/css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="${ctx }/js/jquery/jquery-1.6.1.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#btnCalculate").mouseover(function() {
					$(this).attr("src", "${ctx}/images/jiesuan2.gif");
				});

				$("#btnCalculate").mouseout(function() {
					$(this).attr("src", "${ctx}/images/jiesuan.gif");
				});

				$("#btnCalculate").click(function() {
					if ('<s:property value="products.size()" />' == 0) {
						alert("您没有购买任何商品，无需结算！");

						return;
					}

					var flag = true;

					$("#dataTable tbody tr").each(function() {
						var name = $("#name").text();
						var buynum = $("#buynum").val();
						var num = $("#count").text();

						if (parseInt(buynum) > parseInt(num)) {
							alert(name + "库存：" + num + "个，购买：" + buynum + "个，请调整购买数量！");
							flag = false;
						} else {
							flag = true;
						}
					});

					if (flag) {
						location.href = "${ctx}/shopping/calculateTotal.action";
					} 
				});
			});

			changeBuyNum = function(id) {
				var buynum = $("#buynum").val();

				// 执行Ajax请求
				var url = "${ctx}/shopping/changeShoppingCartItemNum.action";
				var param = { "buynum": buynum, "id": id  };

				$.post(url, param, function(returnData) {
					if ("" != returnData.msg) {
						alert(returnData.msg);
					} else {
						$("#currentTotal").text(returnData.total);
					}
				});
			}

			removeCartItem = function(id) {
				if (confirm('确认要删除么？')) {
					var url = "${ctx}/shopping/removeShoppingCartItem.action?cartId=" + id;

					location.href = url;
				}
			}
		</script>
	</head>

	<body>
		<div style="width: 98%; height: 30px">
			<b>您选好的商品</b>
		</div>
		<div style="width: 98%;">
			<table id="dataTable" cellspacing="0" cellpadding="3" border="1"
				style="background-color: White; border-color: #E7E7FF; border-width: 1px; border-style: None; width: 98%; border-collapse: collapse;">
				<thead>
					<tr>
						<td style="color: Black; background-color: White; font-weight: bold;">
							<div style="width: 100%; background-color: #CCE5FF;">
								<div style="float: left; width: 300px; text-align: left;">
									卡片名称
								</div>
								<div style="float: left; width: 100px; text-align: center;">
									面值
								</div>
								<div style="float: left; width: 150px; text-align: center;">
									您的成交价
								</div>
								<div style="float: left; width: 100px; text-align: center;">
									购买数量
								</div>
								<div style="float: left; width: 100px; text-align: center;">
									库存量
								</div>
								<div style="float: left; text-align: center;">
									删除
								</div>
							</div>
						</td>
					</tr>
				</thead>
				<tbody>
					<s:if test="products.size() == 0">
						<tr align="center">
							<td style="color: Black; background-color: White;">
								购物车中没有任何商品！
							</td>
						</tr>
					</s:if>
					<s:else>
						<s:iterator value="products" status="st">
							<tr>
								<td id="td" style='color: black; <s:if test="#st.odd">background-color:white;</s:if><s:else>background-color:#E8F9E8;</s:else>'>
									<div style="float: left; width: 300px; text-align: left">
										<span id="name">
											<s:property value="cardTypeName" />
										</span>
									</div>
									<div style="float: left; width: 100px; text-align: center">
										<s>
											￥
											<span>
												<s:property value="price.intValue()" />
											</span>
										</s>
									</div>
									<div style="float: left; width: 150px; text-align: center">
										<span style="color: Red;">￥</span>
										<span style="color: Red;">
											<s:property value="currentUserPrice" />
										</span>
									</div>
									<div id="divBuy" style="float: left; width: 100px; text-align: center; padding-top: 2px">
										<input type="text" id="buynum" onchange="changeBuyNum('<s:property value="cartid" />');" name="buynum" style="width: 50px;" value='<s:property value="buynum" />' />
									</div>
									<div style="float: left; width: 100px; text-align: center">
										<span id="count" style="color: Red;">
											<s:property value="num" />
										</span>
									</div>
									<div style="float: left; text-align: center; padding-top: 5px">
										<input type="image" src="${ctx }/images/delete.gif" style="height: 11px; width: 15px; border-width: 0px;" onclick="removeCartItem('<s:property value="cartid" />');" />
									</div>
								</td>
							</tr>
						</s:iterator>
					</s:else>
				</tbody>
			</table>
		</div>
		<hr style="width: 97%; color: #CCE5FF; size: 1px; text-align: left" />
		<div style="width: 96%; height: 39px">
			<div style="float: left; width: 50%; height: 39px; line-height: 39px;">
				&nbsp;&nbsp;
				<a href="#" id="lnkContinue" onclick="self.close();">
					<span style="color: Blue;">&lt;&lt;继续挑选卡片</span>
				</a>
			</div>
			<div style="float: left; width: 36%; height: 39px; line-height: 39px; text-align: left;">
				金额总计：￥&nbsp;
				<span id="currentTotal" style="display: inline-block; color: Red; width: 156px;">
					<s:property value="total" />
				</span>
			</div>
			<div style="float: left;; height: 39px">
				<input id="btnCalculate" src="${ctx }/images/jiesuan.gif" type="image" style="width: 103px; height: 36px" />
			</div>
		</div>
	</body>
</html>
